<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <title>随机数</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Hello, random!</h1>
        <p>A-G</p>
        <p id="A"></p>
        <p>1-9</p>
        <p id="N"></p>
        <hr>
        <p id="show">
            <button class="btn btn-default">*</button>
            <button class="btn btn-default">*</button>
        </p>
        <p><a id="random" class="btn btn-primary btn-lg" href="#" role="button">Come on!</a></p>
    </div>
</div>
<script type="text/javascript" src="./js/jquery3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    let startA = 'A';
    let endA = 'G';
    let startN = 1;
    let endN = 9;
    let ABC = "";
    let timeSpace = 100;
    let randomA = 0;
    let randomN = 0;
    let preTime = 5;
    for (let i=0 ;i<26 ; i++)
        ABC += String.fromCharCode(i+65);
    function aa(i){
        setTimeout(function(){
            $('p#A').append("<button class='btn btn-default' type='button'>" + ABC.charAt(i++) + "</button>");
            if(i<=ABC.indexOf(endA))
                aa(i)
        }, timeSpace)
    }
    aa(ABC.indexOf(startA));
    function bb(i){
        setTimeout(function(){
            $('p#N').append("<button class='btn btn-default' type='button'>" + i++ + "</button>");
            if(i<=endN)
                bb(i)
        }, timeSpace)
    }
    bb(startN);
    $("#random").click(function () {
        //生成随机数
        randomA = randomNum(ABC.indexOf(startA),ABC.indexOf(endA));
        randomN = randomNum(startN,endN);
        $("p#A>button").css("background-color","white")
        $("p#N>button").css("background-color","white")
        $("#A>button:eq("+randomA+")").css("background-color","red");
        $("#N>button:eq("+(randomN-1)+")").css("background-color","red");
        $("#show").html("<button class='btn btn-default'>" + ABC.charAt(randomA)+ "</button>");
        $("#show").append("<button class='btn btn-default'>" + randomN + "</button>");
    })
});
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * ( maxNum - minNum + 1 ) + minNum, 10);
            //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
            break;
        default:
            return 0;
            break;
    }
}
</script>
</body>
</html>